<template>
  <template v-for="(route, index) in navRoutes" :key="index">
    <template v-if="(!route.children || !route?.meta?.hasSubmenu) && !route?.meta?.hidden">
      <template v-if="route.children && route.children.length > 0">
        <a-menu-item
          :key="route.children[0].path"
          :name="route.children[0].name"
          :title="route?.children[0]?.meta?.title"
        >
          <template #icon>
            <span class="anticon">
              <i class="iconfont" :class="route?.children[0]?.meta?.icon"></i>
            </span>
          </template>
          <span>{{ route?.children[0]?.meta?.title }}</span>
        </a-menu-item>
      </template>
      <template v-else>
        <a-menu-item :key="route.path" :name="route.name" :title="route?.meta?.title">
          <template #icon>
            <span class="anticon">
              <i class="iconfont" :class="route.meta?.icon"></i>
            </span>
          </template>
          <span>{{ route?.meta?.title }}</span>
        </a-menu-item>
      </template>
    </template>
    <template v-if="route.children && !route?.meta?.hidden && route?.meta?.hasSubmenu">
      <a-sub-menu :key="route.path" :name="route.name" :title="route?.meta?.title">
        <template #icon>
          <span class="iconfont" :class="route.meta.icon"></span>
        </template>
        <template #title>{{ route.meta.title }}</template>
        <sub-menu :nav-routes="route.children"></sub-menu>
      </a-sub-menu>
    </template>
  </template>
</template>

<script setup lang="ts">
import { RouteRecordRaw } from 'vue-router'
interface INavRouters {
  navRoutes: RouteRecordRaw[]
}
const props = defineProps<INavRouters>()
</script>

<style lang="less" scoped>
.iconfont {
  font-weight: bold;
}
</style>
